<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        form div {
            height: 40px;
            line-height: 40px;
        }
        form div:nth-child(4) {
            height: auto;
        }
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <form action="http://itcast.cn">
        <div>
            <span>姓名：</span>
            <span>
          <input type="text" v-model='uname'>
        </span>
        </div>
        <div>
            <span>性别：</span>
            <span>
              <label for="male">男<input type="radio" id="male" value="1" v-model='gender'></label>
              <label for="female">女<input type="radio" id="female" value="2" v-model='gender'></label>
            </span>
        </div>
        <div>
            <span>爱好：</span>
            <input type="checkbox" id="ball" value="1" v-model='hobby'>
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model='hobby'>
            <label for="sing">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model='hobby'>
            <label for="code">写代码</label>
        </div>
        <div>
            <span>职业：</span>
            <select v-model='occupation' multiple>
                <option value="0">请选择职业...</option>
                <option value="1">教师</option>
                <option value="2">软件工程师</option>
                <option value="3">律师</option>
            </select>
        </div>
        <div>
            <span>个人简介：</span>
            <textarea v-model='desc'></textarea>
        </div>
        <div>
            <input type="submit" value="提交" @click.prevent='handle'>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
        el: '#app',
        data: {
            uname: 'lisi',
            gender: 2,
            hobby: ['2','3'],
            // occupation: 3
            occupation: ['2','3'],
            desc: 'nihao'
        },
        methods: {
            handle: function(){
                console.log(this.uname)
                console.log(this.gender)
                console.log(this.hobby.toString())
                console.log(this.occupation)
                console.log(this.desc)

            }
        }
    });
</script>
</body>
</html>
